<template>
    <div class="insuranceProducts">
        <h1>新增保险</h1>
        <el-form ref="form" :model="insuresData" label-width="80px">
            <el-form-item label="产品名称">
                <el-input v-model="insuresData.productsName"></el-input>
            </el-form-item>
            <el-form-item label="缴费类型">
                <el-input v-model="insuresData.payType"> </el-input>
            </el-form-item>
            <el-form-item label="适用人群">
                <el-input v-model="insuresData.suitableFor"></el-input>
            </el-form-item>
            <el-form-item label="可否续保">
                <el-radio-group v-model="insuresData.renew">
                    <el-radio label="true">续保</el-radio>
                    <el-radio label="false">不续保</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="保单形式">
                <el-checkbox-group v-model="insuresData.policy">
                    <el-checkbox label="暂保单" name="type"></el-checkbox>
                    <el-checkbox label="保险单" name="type"></el-checkbox>
                    <el-checkbox label="保险凭证" name="type"></el-checkbox>
                    <el-checkbox label="批单" name="type"></el-checkbox>
                    <el-checkbox label="其他书面形式" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="insuresData.price"></el-input>
            </el-form-item>
            <el-form-item label="所属分类">
                <el-select v-model="insuresData.typesId" placeholder="请选择">
                    <el-option
                        v-for="item in types"
                        :key="item._id"
                        :label="item.typesName"
                        :value="item._id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="图片">
                <el-upload
                    action="http://localhost:3000/insures/uploadImages"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handleAvatarSuccess"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(insuresData)"
                    >立即新增</el-button
                >
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
let { mapActions } = createNamespacedHelpers("insures");
let {
    mapState: mapStateTypes,
    mapActions: mapActionsTypes,
} = createNamespacedHelpers("types");
export default {
    data() {
        return {
            dialogVisible: false,
            dialogImageUrl: "",
            insuresData: {
                productsName: "",
                payType: "",
                suitableFor: "",
                renew: "",
                policy: [],
                price: "",
                filename: "",
                typesId: "",
            },
        };
    },
    mounted() {
        this.getTypes();
    },
    computed: {
        ...mapStateTypes(["types"]),
    },
    methods: {
        ...mapActions(["addInsuresInfo", "getInsuresInfo"]),
        ...mapActionsTypes(["getTypes"]),
        //提交新增内容
        async onSubmit(insuresData) {
            if (
                this.insuresData.productsName != "" &&
                this.insuresData.payType != "" &&
                this.insuresData.suitableFor != "" &&
                this.insuresData.productsName != "" &&
                this.insuresData.renew != "" &&
                this.insuresData.policy != "" &&
                this.insuresData.price != ""
            ) {
                let data = await this.addInsuresInfo(insuresData);
                if (data.code) {
                    this.$message({
                        message: "新增成功",
                        type: "success",
                    });
                    this.getInsuresInfo();
                } else {
                    this.$message.error({
                        message: "新增失败",
                    });
                }
            } else {
                this.$message({
                    message: "请将信息填写完整",
                    type: "warning",
                });
            }
        },
        handleAvatarSuccess(file) {
            console.log(file);
            this.insuresData.filename = file.data;
        },
        handleRemove(file, fileList) {
            this.$message({
                message: "请重新添加图片",
                type: "success",
            });
        },
        handlePictureCardPreview(file) {
            // this.insuresData.filename = file.response.data;
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
    },
};
</script>

<style lang="scss">
.insuranceProducts {
    padding: 20px;
    width: 800px;
    border: 1px solid rgb(161, 160, 160);
    > h1 {
        padding-left: 10px;
        padding-bottom: 20px;
    }
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>